Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
css-in-js-utils
Advanced tools
A library that provides useful utilities functions for CSS-in-JS solutions.
They are intended to be used by CSS-in-JS library authors rather used directly.
yarn add css-in-js-utils
By now I have authored and collaborated on many different libraries and found I would rewrite the very same utility functions every time. That's why this repository is hosting small utilities especially built for CSS-in-JS solutions and tools. Even if there are tons of different libraries already, they all basically use the same mechanisms and utilities.
assignStyle(base, ...extend)
camelCaseProperty(property)
cssifyDeclaration(property, value)
cssifyObject(object)
hyphenateProperty(property)
isPrefixedProperty(property)
isPrefixedValue(value)
isUnitlessProperty(property)
normalizeProperty(property)
resolveArrayValue(property, value)
unprefixProperty(property)
unprefixValue(value)
assignStyle(base, ...extend)
Merges deep style objects similar to Object.assign
.
It also merges array values into a single array whithout creating duplicates. The last occurence of every item wins.
import { assignStyle } from 'css-in-js-utils'
assignStyle(
{ color: 'red', backgroundColor: 'black' },
{ color: 'blue' }
)
// => { color: 'blue', backgroundColor: 'black' }
assignStyle(
{
color: 'red',
':hover': {
backgroundColor: 'black'
}
},
{
':hover': {
backgroundColor: 'blue'
}
}
)
// => { color: 'red', ':hover': { backgroundColor: 'blue' }}
camelCaseProperty(property)
Converts the property
to camelCase.
import { camelCaseProperty } from 'css-in-js-utils'
camelCaseProperty('padding-top')
// => 'paddingTop'
camelCaseProperty('-webkit-transition')
// => 'WebkitTransition'
cssifyDeclaration(property, value)
Generates a CSS declaration (property
:value
) string.
import { cssifyDeclaration } from 'css-in-js-utils'
cssifyDeclaration('paddingTop', '400px')
// => 'padding-top:400px'
cssifyDeclaration('WebkitFlex', 3)
// => '-webkit-flex:3'
cssifyObject(object)
Generates a CSS string using all key-property pairs in object
.
It automatically removes declarations with value types other than number
and string
.
import { cssifyObject } from 'css-in-js-utils'
cssifyObject({
paddingTop: '400px',
paddingBottom: undefined,
WebkitFlex: 3,
_anyKey: [1, 2, 4]
})
// => 'padding-top:400px;-webkit-flex:3'
hyphenateProperty(property)
Converts the property
to hyphen-case.
Directly mirrors hyphenate-style-name.
import { hyphenateProperty } from 'css-in-js-utils'
hyphenateProperty('paddingTop')
// => 'padding-top'
hyphenateProperty('WebkitTransition')
// => '-webkit-transition'
isPrefixedProperty(property)
Checks if a property
includes a vendor prefix.
import { isPrefixedProperty } from 'css-in-js-utils'
isPrefixedProperty('paddingTop')
// => false
isPrefixedProperty('WebkitTransition')
// => true
isPrefixedValue(value)
Checks if a value
includes vendor prefixes.
import { isPrefixedValue } from 'css-in-js-utils'
isPrefixedValue('200px')
isPrefixedValue(200)
// => false
isPrefixedValue('-webkit-calc(100% - 50px)')
// => true
isUnitlessProperty(property)
Checks if a property
accepts unitless values.
import { isUnitlessProperty } from 'css-in-js-utils'
isUnitlessProperty('width')
// => false
isUnitlessProperty('flexGrow')
isUnitlessProperty('lineHeight')
isUnitlessProperty('line-height')
// => true
normalizeProperty(property)
Normalizes the property
by unprefixing and camelCasing it.
Uses the
camelCaseProperty
andunprefixProperty
-methods.
import { normalizeProperty } from 'css-in-js-utils'
normalizeProperty('-webkit-transition-delay')
// => 'transitionDelay'
resolveArrayValue(property, value)
Concatenates array values to single CSS value.
Uses the
hyphenateProperty
-method.
import { resolveArrayValue } from 'css-in-js-utils'
resolveArrayValue('display', [ '-webkit-flex', 'flex' ])
// => '-webkit-flex;display:flex'
resolveArrayValue('paddingTop', [ 'calc(100% - 50px)', '100px' ])
// => 'calc(100% - 50px);padding-top:100px'
unprefixProperty(property)
Removes the vendor prefix (if set) from the property
.
import { unprefixProperty } from 'css-in-js-utils'
unprefixProperty('WebkitTransition')
// => 'transition'
unprefixProperty('transitionDelay')
// => 'transitionDelay'
unprefixValue(value)
Removes all vendor prefixes (if any) from the value
.
import { unprefixValue } from 'css-in-js-utils'
unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)')
// => 'calc(calc(100% - 50px)/2)'
unprefixValue('100px')
// => '100px'
Every utility function may be imported directly to save bundle size.
import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty'
css-in-js-utils is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
FAQs
Useful utility functions for CSS in JS solutions
The npm package css-in-js-utils receives a total of 1,959,725 weekly downloads. As such, css-in-js-utils popularity was classified as popular.
We found that css-in-js-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.